<template>
  <dl class="common-dl hero-program">
    <dt id="program">
      <i
        class="iconfont icon-xiangmu"
        style="font-size: 18px;font-weight: normal"
      />
      <em>{{$t('program.title')}}</em>
    </dt>
    <!-- <dd
      v-for="v in myGit"
      :key="v.name"
    >
      <h4>
        <a :href="v.url">{{v.name}}</a>
      </h4>
      <p>{{v.desc}}</p>
    </dd> -->
    <dd>
      <h4>
        {{$t('program.edr.title')}}
        <small>{{$t('program.edr.titleSmall')}}</small>
      </h4>
      <p style="color:#5b7988; margin-top: 15px">{{$t('program.selection')}}</p>
      <ul>
        <li>
          <span>{{$t('program.scaffolding')}}</span>
          <span>{{$t('program.edr.scaffolding')}}</span>
        </li>
        <li>
          <span>{{$t('program.pack')}}</span>
          <span>{{$t('program.edr.pack')}}</span>
        </li>
        <li>
          <span>{{$t('program.framework')}}</span>
          <span>{{$t('program.edr.framework')}}</span>
        </li>
        <li>
          <span>{{$t('program.ui')}}</span>
          <span>{{$t('program.edr.ui')}}</span>
        </li>
      </ul>
      <p style="color:#5b7988; margin-top: 15px">{{$t('program.gains')}}</p>
      <ul>
        <li>{{$t('program.edr.g1')}}</li>
        <li>{{$t('program.edr.g2')}}</li>
        <li>{{$t('program.edr.g3')}}</li>
        <li>{{$t('program.edr.g4')}}</li>
        <li>{{$t('program.edr.g5')}}</li>
        <li>{{$t('program.edr.g6')}}</li>
      </ul>
    </dd>

    <dd>
      <h4>
        {{$t('program.eoms.title')}}
        <small>{{$t('program.eoms.titleSmall')}}</small>
      </h4>
      <p style="color:#5b7988; margin-top: 15px">{{$t('program.selection')}}</p>
      <ul>
        <li>
          <span>{{$t('program.scaffolding')}}</span>
          <span>{{$t('program.eoms.scaffolding')}}</span>
        </li>
        <li>
          <span>{{$t('program.pack')}}</span>
          <span>{{$t('program.eoms.pack')}}</span>
        </li>
        <li>
          <span>{{$t('program.framework')}}</span>
          <span>{{$t('program.eoms.framework')}}</span>
        </li>
        <li>
          <span>{{$t('program.ui')}}</span>
          <span>{{$t('program.eoms.ui')}}</span>
        </li>
      </ul>
      <p style="color:#5b7988; margin-top: 15px">{{$t('program.gains')}}</p>
      <ul>
        <li>{{$t('program.eoms.g1')}}</li>
        <li>{{$t('program.eoms.g2')}}</li>
        <li>{{$t('program.eoms.g3')}}</li>
      </ul>
    </dd>

    <dd>
      <h4>
        {{$t('program.liyi.title')}}
        <small>{{$t('program.liyi.titleSmall')}}</small>
      </h4>
      <p style="font-size: 13px">{{$t('program.liyi.desc')}}</p>
      <p style="color:#5b7988; margin-top: 15px">{{$t('program.selection')}}</p>
      <ul>
        <li>
          <span>{{$t('program.scaffolding')}}</span>
          <span>{{$t('program.liyi.scaffolding')}}</span>
        </li>
        <li>
          <span>{{$t('program.pack')}}</span>
          <span>{{$t('program.liyi.pack')}}</span>
        </li>
        <li>
          <span>{{$t('program.framework')}}</span>
          <span>{{$t('program.liyi.framework')}}</span>
        </li>        
      </ul>
      <p style="color:#5b7988; margin-top: 15px">{{$t('program.gains')}}</p>
      <ul>
        <li>{{$t('program.liyi.g1')}}</li>
        <li>{{$t('program.liyi.g2')}}</li>
        <li>{{$t('program.liyi.g3')}}</li>
        <li>{{$t('program.liyi.g4')}}</li>
        <li>{{$t('program.liyi.g5')}}</li>
        <li>{{$t('program.liyi.g6')}}</li>
      </ul>
    </dd>
  </dl>
</template>

<script>
export default {
  name: 'program',
  props: {
    myGit: {
      type: Array,
      default() {
        return []
      },
    },
  },
}
</script>

<style lang="stylus" scoped>
.hero-program
  dd
    ul
      li
        display flex
        justify-content start
        span
          &:first-child
            width: 90px
          &:last-child
            width calc(100% - 90px)
</style>
